<#include "/common/com.html" /> <@layout>
<head>

</head>
<script>
  function del(){
	  var id=$("#id").attr("value")
	  var url ="${ctx}/wxContent?id="+id+"&from=user";
	  window.location.href=url;
  }
  function save(){
	  var id=$("#id").attr("value")
	  $("#content").attr("value",$("#sorttable").html());
      var url = '${ctx}/wxContent/update/';
      $('#myform').form('submit', {
          url : url,
          onSubmit : function() {
          },
          success : function(data) {
              // 回填页面
              alert(data);
        	  var url ="${ctx}/wxContent?id="+id+"&from=user";;
        	  window.location.href=url;
          }
      });
}
</script>
<body>
	<div class="page-content">
		<div class="position-relative">
			<div style="text-align: center">
				<p  class="alert alert-info"> 	
					<a href="#" onclick="save();" class="btn btn-info btn-small">保存
					</a> &nbsp;&nbsp;&nbsp;&nbsp; <a href="#" onclick="del();"
						class="btn btn-info btn-small">取消</a> &nbsp;&nbsp;
				</p>
			</div>
				<form class="form-inline" id="myform">
					<#list newlist as m> <input type="hidden" name="wxContent.type"
						id="type" value="${(m.type)!}"> <input type="hidden"
						name="wxContent.id" id="id" value="${(m.id)!}"> <input
						type="hidden" name="wxContent.content" id="content">
						<h3 class="bigger lighter"  style="text-align: center">${(m.title)!}</h3>
					</#list>
				</form>
		</div>
		<!-- /.page-header -->

		<!-- PAGE CONTENT BEGINS -->
			<div class="hr dotted" style="background: #2283C5"></div>
	

		<div class="row-fluid" style="padding: 2px">
	<div class="text" id="sorttable">
	<#list newlist as
			m>${(m.content)!}</#list></div>
			<p>
				<button onclick='adds()' class="btn btn-info btn-block">新增内容</button>
			</p>
	</div>
		</div>
		<!-- /.page-content -->

		<div id="dialog-message" class="hide">
			<div class="container-fluid">
				<div class="row-fluid">
					<div class="span12">
						<textarea class="autosize-transition span12" name="zysx" id="zysx"></textarea>
					</div>
				</div>
			</div>
		</div>
		<!-- #dialog-message -->

		<!-- page specific plugin scripts -->

		<script src="${ctx}/static/assets/js/ace.min.js"></script>
		<script src="${ctx}/static/assets/js/jquery-ui-1.10.3.custom.min.js"></script>
		
		<script src="${ctx}/static/assets/js/jquery.ui.touch-punch.min.js"></script>
		<script src="${ctx}/static/assets/js/bootstrap-wysiwyg.min.js"></script>

		
		<script type="text/javascript">
		function add(obj){
			$("#zysx").attr("value",$(obj).text());
		 var dialog = $( "#dialog-message" ).dialog({
	                modal: false,
	                width: "80%",
	                title_html: true,
	                overlay: {
	                    backgroundColor: '#000',
	                    opacity: 0.5
	                },
	                buttons: [
	                    {
	                        text: "确定",
	                        "class" : "btn btn-primary btn-mini ",
	                        click: function() {
	                			var texta =$("#zysx").val() ;
	                			$(obj).children().text(texta);
	                          $( this ).dialog( "close" );
	                        }
	                    },
	                    {
	                        text: "删除",
	                        "class" : "btn btn-mini btn-danger ",
	                        click: function() {
	                			$(obj).remove();
	                            $( this ).dialog( "close" );
	                        }
	                    },
	                    {
	                        text: "取消",
	                        "class" : "btn btn-mini ",
	                        click: function() {
	                            $( this ).dialog( "close" );
	                        }
	                    }
	                ]
	            }); 
		}
function adds(obj){
			$("#zysx").attr("value",$(obj).children().text());
		 var dialog = $( "#dialog-message" ).dialog({
	                modal: false,
	                width: "80%",
	                title_html: true,
	                overlay: {
	                    backgroundColor: '#000',
	                    opacity: 0.5
	                },
	                buttons: [
	                    {
	                        text: "确定",
	                        "class" : "btn btn-primary btn-mini ",
	                        click: function() {
//	                        	alert($("#divs").children().get(0))
	                			var texta =$("#zysx").val() ;
	                        	var htm="<p onclick='add(this);'  > " +texta+"</p>";
		               			if ($("#sorttable").children().get(0) ==undefined ){
		               				alert(htm);
			               			 $("#sorttable").append(htm) ;
	                        	} else {
	                        		$("#sorttable p:last").after(htm);
	                        	}
	                          $( this ).dialog( "close" );
	                        }
	                    },
	                    {
	                        text: "删除",
	                        "class" : "btn btn-mini btn-danger ",
	                        click: function() {
	                            $( this ).dialog( "close" );
	                        }
	                    },
	                    {
	                        text: "取消",
	                        "class" : "btn btn-mini ",
	                        click: function() {
	                            $( this ).dialog( "close" );
	                        }
	                    }
	                ]
	            }); 
		}
		
jQuery(function($) {
	 $("#sorttable").sortable({
			opacity:0.8,
			revert:true,
			forceHelperSize:true,
			forcePlaceholderSize:true,
			placeholder: ' alert-danger',
			tolerance:'pointer'
	    });
});

function onBridgeReady() {
	WeixinJSBridge.call('hideOptionMenu');
}

if (typeof WeixinJSBridge == "undefined") {
	if (document.addEventListener) {
		document.addEventListener('WeixinJSBridgeReady', onBridgeReady,
				false);
	} else if (document.attachEvent) {
		document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
		document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
	}
} else {
	onBridgeReady();
}
</script>
</body>
</@layout>
